{% set lang = page.url | getlang %}

{# join simplex #}
<section id="join-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[855px] py-[90px] px-5">
    <div class="container flex flex-col items-center">
        <h2 class="text-[38px] leading-[36px] md:leading-[55px] text-grey-black dark:text-white text-center font-bold mb-5"><span class="text-active-blue">{{ "join" | i18n({}, lang ) | safe }}</span> SimpleX</h2>
        <p class="text-black dark:text-white text-base text-center mb-14">{{ "we-invite-you-to-join-the-conversation" | i18n({}, lang ) | safe }}</p>

        <div class="flex flex-col items-center gap-5 self-stretch mb-12">
            <a href="https://www.reddit.com/r/SimpleXChat/" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">{{ "join-the-REDDIT-community" | i18n({}, lang ) | safe }}</a>
            <a href="https://github.com/simplex-chat" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">{{ "join-us-on-GitHub" | i18n({}, lang ) | safe }}</a>
            <a href="https://github.com/simplex-chat/simplex-chat#please-support-us-with-your-donations" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:border-none bg-white dark:bg-[rgba(112,240,249,0.2)] border border-[#0053D0]">{{ "donate-here-to-help-us" | i18n({}, lang ) | safe }}</a>
        </div>

        <p class="text-grey-black dark:text-white text-base text-center mb-7">{{ "sign-up-to-receive-our-updates" | i18n({}, lang ) | safe }}</p>

        <form class="flex items-center w-full max-w-[540px] mb-20"
            action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
            method="post" target="_blank" novalidate>
            <input name="EMAIL" type="text" class="h-[44px] ltr:rounded-l-[34px] rtl:rounded-r-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5 placeholder:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" placeholder="{{ "enter-your-email-address" | i18n({}, lang ) | safe }}">
            <span aria-hidden="true" class="hidden">
                <input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
            </span>
            <input type="submit" class="h-[44px] ltr:rounded-r-[34px] rtl:rounded-l-[34px] bg-primary-light text-white text-center px-8">
        </form>

        <hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">

        <p class="text-grey-black dark:text-white text-center mb-7">{{ "get-simplex" | i18n({}, lang ) | safe }}</p>
        <div class="flex items-center justify-center gap-4 flex-wrap">
            <a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
            <a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
            <a href="{{ '' if lang == 'en' else '/' ~ lang }}/fdroid"  title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
            <a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img class="h-[40px] w-auto" src="/img/new/testflight.png" /></a>
            <a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apk_icon.png" /></a>
        </div>
    </div>
</section>
